<template>
	<view class="coming_online_soon">
		<view class="title">{{item.name}}</view>
		<view class="content">
			<view class="card" :style="'background-image: url(' + card_bg+ ')'">
				<p>{{item.msg}}</p>

				<view @click.stop="remind" class="remind_btn">
					<image :src="`${imgPath}/upload/h5/home/5.png`"></image>
					提醒我
				</view>
			</view>
		</view>
		<image class="img" :src="item.photo"></image>
	</view>
</template>
<script>
	export default {
		props: ["item"],
		data() {
			return {
				imgPath: uni.imgPath,
				card_bg: `${uni.imgPath}/upload/h5/home/9.png`
			}
		},
		methods: {
			remind(event) {

				var templateId = 'WPZgP1Hx7GFM6Q_AtrBasNgDkDAWHuG3cmQHLb9Ceqw'
				uni.requestSubscribeMessage({
					tmplIds: [templateId], // 需要订阅的模板ID
					success(res) {
						console.log(res);
						if (res[templateId] === 'accept') {
							console.log("用户接受订阅")
						} else {
							console.log("用户拒绝了订阅")
						}
						// 用户允许订阅通知
					},
					fail(err) {
						// 用户拒绝授权或其他错误
						console.error(err);
						// 引导用户前往【设置】页面打开【接受订阅消息】权限
						wx.showModal({
							title: '通知订阅失败',
							content: '请前往【设置】页面打开【接受订阅消息】权限，并确保下方订阅消息都已经接受。',
							success(res) {
								if (res.confirm) {
									wx.openSetting({
										success(res) {
											// 用户在【设置】页面打开了订阅消息权限后的回调
											console.log(res);
										},
										fail(err) {
											console.error(err);
										}
									});
								}
							}
						});
					}
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.coming_online_soon {
		margin: 10rpx 20rpx;
		border-radius: 30rpx;
		background-color: #fff;
		position: relative;

		.title {
			font-size: 28rpx;
			font-weight: bold;
			padding: 20rpx 30rpx;
			border-bottom: 1px solid #EEE;
		}

		.content {
			.card {
				position: relative;
				padding: 20rpx;
				background-size: 100% 100%;
				height: 60rpx;

				p {
					line-height: 30rpx;
					font-size: 24rpx;
				}

				.remind_btn {
					z-index: 1;
					color: #fff;
					position: absolute;
					bottom: 15%;
					right: 5%;
					background: linear-gradient(180deg, #148DFF 0%, #6CC3FF 100%);
					padding: 10rpx 20rpx;
					border-radius: 30rpx;
					font-size: 26rpx;

					image {
						width: 30rpx;
						height: 30rpx;
						vertical-align: middle;
						margin-right: 10rpx;
						position: relative;
						top: -5rpx;
					}
				}
			}
		}

		.img {
			z-index: 0;
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			height: 160rpx;
			width: 240rpx;
		}
	}
</style>